import React, {useEffect, useState} from "react";
import {Button, message, Popconfirm, Space, Table} from "antd";
import {ColumnsType} from "antd/es/table";
import {
    CodeOutlined,
    DeleteOutlined,
    DownloadOutlined,
    EditOutlined,
    EyeOutlined,
    ThunderboltOutlined
} from "@ant-design/icons";
import {httpGet, Result} from "@/utils/http";
import {ScriptAdd} from "@/pages/script/components";
import {DataNode} from "@/pages/script";

export interface ServerScriptListProp {
    id: number;
    group_id: number;
    group_name: string;
    server_id: number;
    server_name: string;
    item_type: number;
    curr_path: string;
    key: string;
    title: string;
    desc: string;
    work_home: string;
    work_path: string;
    file_name: string;
    content: string;
    script_type: number;
    script_param: string;
    log_file: string;
    create_id: number;
    create_time: string;
}

interface ComponentProp {
    serverId: number;
}

export const ServerScript: React.FC<ComponentProp> = ({serverId}) => {

    const columns: ColumnsType<ServerScriptListProp> = [
        {
            title: '序号',
            key: 'index',
            dataIndex: 'index',
            align: 'center',
            width: 100,
            render: (text, record, index) => <span>{index + 1}</span>,
        },
        {
            title: '脚本名称',
            key: 'title',
            dataIndex: 'title',
            align: 'center',
        },
        {
            title: '脚本类型',
            key: 'script_type',
            dataIndex: 'script_type',
            align: 'center',
        },
        {
            title: '描述',
            key: 'desc',
            dataIndex: 'desc',
            align: 'center',
        },
        {
            title: '创建时间',
            key: 'create_time',
            dataIndex: 'create_time',
            align: 'center',
        },
        {
            title: '操作',
            key: 'active',
            align: 'center',
            width: 150,
            render: (text, record, index) => (
                <Space size={'small'}>
                    <Button size="small" type="link" icon={<ThunderboltOutlined />} />
                    <Button size="small" type="link" icon={<EyeOutlined />} />
                    <Button size="small" type="link" icon={<CodeOutlined />} />
                    <Button size="small" type="link" icon={<EditOutlined />} />
                    <Popconfirm
                        placement="bottom"
                        title="警告"
                        description="删除当前分组后，下属的所有服务都将无法使用，确认删除吗？"
                        onConfirm={() => undefined}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button size="small" type="link" danger icon={<DeleteOutlined />}/>
                    </Popconfirm>

                </Space>
            ),
        },
    ]

    const [loading, setLoading] = useState<boolean>(false);
    const [datasource, setDatasource] = useState<ServerScriptListProp[]>([]);
    const [addVisible, setAddVisible] = useState<boolean>(false);
    const [updateVisible, setUpdateVisible] = useState<boolean>(false);

    const loadData = () => {
        setLoading(true);
        httpGet<Result<ServerScriptListProp[] | string>, any>('/server/script/list', {sId: serverId}).then(res => {
            if (res.code === 100200) {
                setDatasource(res.result as ServerScriptListProp[]);
            } else {
                message.error(res.result as string)
            }
        }).catch(err => {
            console.error(err)
        }).finally(() => {setLoading(false)})
    }

    const closeModel = (types: "update" | "insert", data?: ServerScriptListProp) => {
        if (types === 'insert') {
            setAddVisible(false);
            setDatasource([...datasource, data!])
        }
    }

    useEffect(() => { loadData() }, [serverId])

    return <div>
        <Space>
            <Button size='small' type='primary' onClick={() => setAddVisible(true)}>创建脚本</Button>
            <Button size='small' type='primary' danger>删除脚本</Button>
        </Space>
        <Table
            size={'small'}
            style={{ marginTop: 10 }}
            columns={columns}
            dataSource={datasource}
            bordered
            pagination={false}
            loading={loading}
        />
        <ScriptAdd serverId={serverId} visible={addVisible} onCancel={(data) => closeModel('insert', data)} />
    </div>
}
